<template>
  <el-dialog v-model="dialog" title="新增试用" width="600px" :close-on-click-modal="false">
    <div style="display: flex; align-items: center; justify-content: center;">
      <el-form ref="elForm" :rules="rules" :model="form" label-width="85px" style="width: 550px;">
        <el-form-item label="公司名称" prop="compName">
          <el-input v-model="form.compName" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="form.tel" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="客户来源" prop="customerSource">
          <el-select v-model="form.customerSource" placeholder="请选择客户来源">
            <el-option v-for="item of sourceTypes" :key="item.listKey" :value="item.listKey" :label="item.listValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类别" prop="category">
          <el-select v-model="form.category" placeholder="请选择产品类别">
            <el-option v-for="item of categoryList" :key="item.listKey" :value="item.listKey" :label="item.listValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在区域" prop="areaId">
          <el-select class="w120" v-model="form.provinceId" @change="changeProvince">
            <el-option v-for="item of provinces" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
          <el-select class="w120 mL10" v-model="form.cityId" @change="changeCity">
            <el-option v-for="item of cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
          <el-select class="w120 mL10" v-model="form.areaId">
            <el-option v-for="item of countries" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input placeholder="请输入IP" v-model="form.ip"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="6" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="confirmUpdate">保存</el-button>
      <el-button @click="dialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  
  import {
    ref,
    reactive,
    inject,
    getCurrentInstance
  } from 'vue'
  
  const $getProvinces = inject('$getProvinces');
  const $getCities = inject('$getCities');
  const $getCountries = inject('$getCountries');
  const $emit = defineEmits(['confirm']);
  const $message = inject('$message');
  const $post = inject('$post');
  const {
    ctx
  } = getCurrentInstance();
  
  const dialog = ref(false);
  
  // 获取所有客户来源
  const sourceTypes = ref([]);
  $post('/v2/tdltry/sourcetype').then(res => {
    sourceTypes.value = res.data;
  });
  
  // 获取产品类别
  const categoryList = ref([])
  $post('/v2/tdltry/CategoryList').then(res => {
    categoryList.value = res.data;
  });
  
  // 省市区
  const provinces = reactive($getProvinces());
  const cities = ref([]);
  const countries = ref([]);
  const streets = ref([]);
  // 修改省
  const changeProvince = val => {
    cities.value = $getCities(val);
    countries.value = [];
    form.cityId = '';
    form.areaId = '';
  }
  // 修改市
  const changeCity = val => {
    countries.value = $getCountries(val);
    form.areaId = '';
  }
  
  // 表单
  const form = reactive({
    // 公司名称
    compName: '',
    // 联系人
    contact: '',
    // 联系方式
    tel: '',
    // 客户来源
    customerSource: '',
    // 产品类别
    category: '',
    // 所在区域
    provinceId: '',
    cityId: '',
    areaId: '',
    ip: '',
    remark: ''
  });
  
  const rules = {
    compName: [{
      required: true,
      message: '请输入公司名称',
      trigger: 'change'
    }],
    contact: [{
      required: true,
      message: '请输入联系人',
      trigger: 'change'
    }],
    tel: [{
      required: true,
      message: '请输入联系方式',
      trigger: 'change'
    }, {
      validator: (rule, value, callback) => {
        if (/1[3-9]\d{9}/.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号'));
        }
      },
      trigger: 'change'
    }],
    customerSource: [{
      required: true,
      message: '请选择客户来源',
      trigger: 'change'
    }],
    areaId: [{
      required: true,
      message: '请选择所在区域',
      trigger: 'change'
    }]
  }
  
  const confirmUpdate = () => {
    ctx.$refs.elForm.validate(res => {
      if (!res) return;
      $post('/tdltry/addnewtrym', form).then(res => {
        $message.success('新增待试用用户成功！');
        ctx.$refs.elForm.resetFields();
        form.provinceId = '';
        form.cityId = '';
        $emit('confirm');
        dialog.value = false;
      })
    })
  }
  
  defineExpose({
    show: function (tryGuid) {
      dialog.value = true;
    }
  });
  
  
  
</script>

<style>
</style>
